<template>
	<view class="">
		<f-navbar title="同城服务" fontColor="#ffffff" bgColor="#ffa200" :scrollTop="scrollTop" navbarType='0'></f-navbar>
		<!-- 	<roll></roll> -->
		<statement text="免责声明：本平台只负责发布、展示，所有信息与平台本身无关，平台不负任何责任。"></statement>
		<view class="minWidth">
			<!-- 搜索 -->
			<view class="flex">
				<view class="regionText">
					贵阳市 
				</view>
				<span class="icon" style="color: #d70000;font-size: 30rpx;">&#xe600;</span>

				<view class="text-area">
					<input type="text" class="inputBox" placeholder="  请搜索你需要的服务">
				</view>
			</view>


			<!-- 筛选 -->
			<view class="screenFlex">
				<view class="selectedText">
					精选服务
				</view>
				<view class="screenFlex" style="width: 350rpx;">
					<view class="screenTagBox">
						推荐
					</view>
					<view class="screenTagBox">
						附近
					</view>
					<view class="screenTagBox">
						最新
					</view>
					<view class="screenTagBox" @click="showDrawer('showRight')">
						筛选
					</view>
				</view>
			</view>

			<!-- <typeTabs></typeTabs> -->

			<!-- 内容	 -->
			<view class="minWidth" style="margin-top: 30rpx;">
				<view class="" v-for="(item,index) in dataList">
					  <view class="flexBetween">
					  	<view class="flexStart">
					  		<image src="../../static/projectIcon/1.jpg" mode="" class="headImg"></image>
					  	
					  		<view class="" style="margin-left: 20rpx;">
					  			<view class="text" style="font-size: 26rpx;color: #363636;">
					  				微信用户
					  			</view>
					  			<view class="text">
					  				309人浏览 2023-05-21 12:07:00
					  			</view>
					  		</view>
					  	
					  	</view>
					  	
					  	<view class="" style="font-size: 26rpx;color: #0051ff">
					  		查看详情...
					  	</view>
					  </view>

					<view class="flexStart" style="margin-top: 20rpx;">
						<view class="toppingBox">
							置顶
						</view>
						<view class="toppingBox categoryBox" style="margin-left: 20rpx;">
							生活服务
						</view>

						<view class="toppingBox categoryBox" style="margin-left: 20rpx;">
							个人认证
						</view>
						<view class="toppingBox categoryBox" style="margin-left: 20rpx;">
							优选商家
						</view>
					</view>

					<view class="tagTitle">
						职位名称： 日结兼职25/小时
					</view>
					<view class="tagTitle">
						招聘人数： 不限
					</view>
					<view class="tagTitle">
						职位描述： 本人有110平米左右的空架自建房一层，可做门面，可做加工房，可以做仓库，有独立的动力电，水表。有用得上的老板价格面议。地址庙儿山，原明康医院的对面，联系电话18798711581
					</view>
					<view class="tagTitle">
						上传图片：
						<view class="imgBox" style="margin-top: 30rpx;">
							<image src="../../static/other/111.jpg" mode="widthFix"></image>
						</view>
					</view>
					
					<view class="flexStart" style="margin-top: 20rpx;">
						<view class="toppingBox categoryBox" style="margin-right: 20rpx;">
							客户至上
						</view>
					
						<view class="toppingBox categoryBox" style="margin-right: 20rpx;">
							五险一金
						</view>
					</view>

				
				</view>
			</view>


				<view class="example-body">
					<!-- 		<button type="primary" @click="showDrawer('showRight')"><text class="word-btn-white">显示Drawer</text>
					</button> -->
					<uni-drawer  ref="showRight" mode="right" width=300 :mask-click="false"
						@change="change($event,'showRight')">
						<view class="scroll-view" >	
							<scroll-view class="scroll-view-box" scroll-y="true">
								<view class="info-content flex"  style="padding-top: 200rpx;">
									<view class="tagBox" v-for="(item,index) in tagList" :key="index"
										@click="tagFun(item.id)" :class="{isSelected:item.selected}">
										{{item.title}}
									</view>
								</view>
								<view class="btnBox">
									<view class="close" @click="closeDrawer('showRight')">
										关闭
									</view>
									<view class="confirm">
										确认
									</view>
								</view>
							</scroll-view>
						</view>
					</uni-drawer>
				</view>
		
		</view>
	</view>
</template>

<script>
	import statement from "../../components/statement/statement.vue"
	import typeTabs from '@/components/u-tabs/u-tabs.vue'
	export default {
		components: {
			statement,
			typeTabs
		},
		data() {
			return {
				dataList: [{

				}],
				tagList: [{
						title: '上门回收',
						id: 0,
						selected: false,
					},
					{
						title: '闲置回收',
						id: 1,
						selected: false,
					},
					{
						title: '废品回收',
						id: 2,
						selected: false,
					},
					{
						title: '礼品黄金回收',
						id: 3,
						selected: false,
					},
					{
						title: '租房/租写字楼',
						id: 3,
						selected: false,
					},
					{
						title: '买房/卖房',
						id: 3,
						selected: false,
					},
					{
						title: '拼车/租车/包车',
						id: 3,
						selected: false,
					},
					{
						title: '宠物寄养',
						id: 5,
						selected: false,
					},
					{
						title: '衣物洗护',
						id: 6,
						selected: false,
					},
					{
						title: '开锁换锁',
						id: 7,
						selected: false,
					},
					{
						title: '管道疏通',
						id: 8,
						selected: false,
					},
					{
						title: '家电电脑维修清洗',
						id: 9,
						selected: false,
					},
					{
						title: '送水送气',
						id: 10,
						selected: false,
					},
					{
						title: '搬家货运',
						id: 11,
						selected: false,
					},
					{
						title: '物流快递',
						id: 12,
						selected: false,
					},
					{
						title: '抵押借款',
						id: 13,
						selected: false,
					}
				]
			}
		},
		methods: {
			confirm() {},
			tagFun(id) {
				console.log("id==" + id)
				for (var i = 0; i < this.tagList.length; i++) {
					if (this.tagList[i].id == id) {
						console.log("id==" + id)
						this.tagList[i].selected = !this.tagList[i].selected
					}
				}

			},
			// 打开窗口
			showDrawer(e) {
				this.$refs[e].open()
			},
			// 关闭窗口
			closeDrawer(e) {
				this.$refs[e].close()
			},
			// 抽屉状态发生变化触发
			change(e, type) {
				console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
				this[type] = e
			}
		},
		onNavigationBarButtonTap(e) {
			if (this.showLeft) {
				this.$refs.showLeft.close()
			} else {
				this.$refs.showLeft.open()
			}
		},
	}
</script>

<style scoped lang="scss">
	.tagBox {
		padding: 0 15rpx;
		background-color: #f69000;
		height: 40rpx;
		color: #ffffff;
		font-size: 20rpx;
		line-height: 40rpx;
		border-radius: 5rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}

	.minWidth {
		width: 680rpx;
		margin: 0 auto;
	}

	.regionText {
		font-size: 20rpx;
	}

	.inputBox {
		width: 550rpx;
		height: 50rpx;
		background-color: #ececec;
		border-radius: 50rpx;
		margin: 30rpx auto;
		font-size: 26rpx;
	}

	.flex {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.statementText {
		font-size: 16rpx;
		color: #8b8b8b;
	}

	.example-body {
		padding: 10px;
	}

	.scroll-view {
		/* #ifndef APP-NVUE */
		width: 100%;
		height: 100%;
		/* #endif */
		flex: 1
	}

	// 处理抽屉内容滚动
	.scroll-view-box {
		flex: 1;
		position: absolute;
		top: 30rpx;
		right: 0;
		bottom: 0;
		left: 0;

	}

	.info {
		padding: 15px;
		color: #666;
	}

	.info-text {
		font-size: 14px;
		color: #666;
	}

	.info-content {
		padding: 5px 15px;
	}

	.close {
		padding: 10px;
	}

	.isSelected {
		background-color: #e60003;
	}

	.btnBox {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.close {
		width: 150rpx;
		height: 40rpx;
		color: #757575;
		font-size: 20rpx;
		line-height: 40rpx;
		border-radius: 50rpx;
		border: 1rpx solid #757575;
		text-align: center;
	}

	.confirm {
		width: 200rpx;
		height: 80rpx;
		color: #ffffff;
		font-size: 20rpx;
		line-height: 80rpx;
		border-radius: 50rpx;
		background-color: #f69000;
		text-align: center;
	}

	.screenFlex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.screenTagBox {
		padding: 10rpx;
		color: #ef8300;
		font-size: 20rpx;
		border-radius: 5rpx;
		background-color: rgba(255, 170, 0, 0.3);
	}

	.selectedText {
		font-weight: bold;
		font-size: 26rpx;
	}

	.content {
		display: flex;
		flex-direction: column;
		width: 100%;
		flex: 1;

		.nav {
			border-top: 1rpx solid #f2f2f2;
			background-color: #f5f5f5;
			border-bottom: #b6b6b6 1rpx solid;
			// position: fixed;
			z-index: 99;
			width: 100%;
			align-items: center;
			height: 100rpx;

			.tab-scroll {
				flex: 1;
				overflow: hidden;
				box-sizing: border-box;
				padding-left: 30rpx;
				padding-right: 30rpx;

				.tab-scroll_box {
					display: flex;
					align-items: center;
					flex-wrap: nowrap;
					box-sizing: border-box;

					.tab-scroll_item {
						line-height: 60rpx;
						margin-right: 35rpx;
						flex-shrink: 0;
						padding-bottom: 10px;
						display: flex;
						justify-content: center;
						font-size: 16px;
						padding-top: 10px;
					}
				}
			}
		}

		.swiper-content {
			padding-top: 120rpx;
			flex: 1;

			.swiperitem-content {
				background-color: #ffffff;

				.nav_item {
					background-color: #FFFFFF;
					padding: 20rpx 40rpx 0rpx 40rpx;
				}
			}
		}
	}
	.active {
			position: relative;
			color: #373737;
			font-weight: 600;
		}
		.active::after {
			content: "";
			position: absolute;
			width: 120rpx;
			height: 7rpx;
			background-color: #f69000;
			border-radius: 10rpx;
			left: 0px;
			right: 0px;
			bottom: 0px;
			margin: auto;
		}
		/* 隐藏滚动条，但依旧具备可以滚动的功能 */
	.uni-scroll-view::-webkit-scrollbar {
			display: none
		}
		
		.headImg{
			width: 80rpx;
			height: 80rpx;
			border-radius: 50rpx;
		}
		.flexStart{
			display: flex;
			justify-content: flex start;
			align-items: center;
		}
		.text{
			font-size: 20rpx;
			color: #868686;
		}
		
		.toppingBox{
			width: 70rpx;
			background-color: #f69000;
			height: 35rpx;
			color: #ffffff;
			font-size: 20rpx;
			line-height: 35rpx;
			text-align: center;
			border-radius: 5rpx;
		}
		
		.categoryBox{
			background-color: #00c8aa;
			width: 120rpx;
		}
		
		.imgBox{
			width: 220rpx;
			height: 150rpx;
			overflow: hidden;
			border-radius: 10rpx;
		}
		
		.tagTitle{
			color: #515151;
			font-size: 26rpx;
			margin: 30rpx 0;
		}
		
		.flexBetween{
			display: flex;
			justify-content: space-between;
			align-items: center;
			
		}
</style>